﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Main.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import Namespace="Tencent.OA.ACM.Entity" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder" runat="server">
    <link href="<%= this.Url.Content("~/content/jqui/css/jquery.ui.all.css") %>" rel="Stylesheet" type="text/css" />

    <%--<script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script>--%>

    <script type="text/javascript" language="javascript" src="<%=this.Url.Content("~/content/routeview.js") %>"></script>

    <script type="text/javascript">
        var all_rs = [];
    </script>

    <script type="text/javascript">
        var dircache = '<%=this.Url.Content("~/caches/") %>';
        var pageUrl = '<%=this.Url.Content("~/Home/RouteView") %>';
        var mapIconUrl = '<%=this.Url.Content("~/Content/gimgs/") %>';
        var wucha = 0.01; //经纬度的误差范围 0.01约1000米
        var myLatlng = null;
        var marker;
        var map;
        var curRid = '<%= ViewData["rid"] %>';
        var curSid = '<%= ViewData["sid"] %>';
        var lon;
        var lat;
        var nearStation = [];
        var routeLineStations = [];
        var routeInfo;
        var waypts = [];
        var miAZg = null; //绿色地图图标工厂
        var miAZr = null; //红色地图图标工厂
        //绘制路线(沿实际路线绘制)
        var directionsDisplay;
        var directionsService;
        var lineStrokeColor = "#00FF00"; //上班路线颜色

        //初始化地图
        function initMap() {
            myLatlng = new google.maps.LatLng(22.53969424532717, 113.93559741973877);
            directionsService = new google.maps.DirectionsService();
            
            var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: myLatlng
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            // Create one InfoWindow to open when a marker is clicked.
            gInfoWindow = new google.maps.InfoWindow();
            google.maps.event.addListener(gInfoWindow, 'closeclick', function() {
                unselectAllMarkers();
            });

            miAZr = new MapIconAZ(mapIconUrl, 'marker_red');
            miAZg = new MapIconAZ(mapIconUrl, 'marker_green');
        }
        function loadJS() {
            var allrs = $.ajax({
                url: dircache + "base_info/all_rs.js?rd=" + Math.random(),
                async: false,
                dataType: "json"
            }).responseText;
            try {
                all_rs = eval("(" + allrs + ")");
            } catch (ex) { all_rs = []; }
        }
        function map_init() {
            //初始化　地图
            initMap();
            //提出路线的所有站点
            loadRouteStations(curRid);
            //提出站点附近的其他路线
            loadStationNearRoutes(curRid, curSid);
            //提出路线及站点的详细信息
            loadRouteStationDetailInfos(curRid, curSid);
            //设置当前为选中的状态
            setSelectLi(curRid, curSid);
        }
        //PAGE LOAD
        $(function() {
            loadJS();
            //初始化　地图
            //initMap();
            $.getScript("http://maps.google.cn/maps/api/js?sensor=false&callback=map_init");
        });
        //提出路线的所有站点
        function loadRouteStations(rid) {
            var ri = $.ajax({
                url: dircache + 'base_info/' + rid + '.js?rnd=' + Math.random(),
                async: false,
                dataType: "json"
            }).responseText;
            try {
                ri = eval("(" + ri + ")");
                routeInfo = ri;
            } catch (ex) {
                ri = null;
                InfoTip.showMessage("您访问的路线不存在，或已被删除！", 2);
                return;
            }
            var shortRiName = ri.rname.length > 8 ? ri.rname.substr(0, 6) + '...' : ri.rname;
            $("#stationListTitle").html(shortRiName);
            $("#routeInfoTitle").html(ri.cname + '--' + ri.rt + '&nbsp;&nbsp;' + shortRiName);
            drawRouteLine(ri);
        }
        //绘制路线在地图上
        function drawRouteLine(ri) {
            if (ri == null)
                return;
            if (ri.bd == 1)//下班
                lineStrokeColor = "#FF0000";
            routeLineStations = [];
            var i = 0;
            if (ri.ss && ri.ss.length > 0) {
                var lls = new google.maps.LatLng(ri.ss[i].lat, ri.ss[i].lon);
                var s = new SearchMapResult(ri.ss[i], ri);
                routeLineStations.push(s);
                if (ri.ss.length > 1) {
                    waypts = [];
                    var lastIdx = ri.ss.length - 1;
                    for (i = 1; i < lastIdx; i++) {
                        s = new SearchMapResult(ri.ss[i], ri);
                        routeLineStations.push(s);
                        var loc0 = new google.maps.LatLng(ri.ss[i].lat, ri.ss[i].lon);
                        waypts.push({ location: loc0, stopover: true });
                    }
                    var lle = new google.maps.LatLng(ri.ss[lastIdx].lat, ri.ss[lastIdx].lon);
                    s = new SearchMapResult(ri.ss[i], ri);
                    routeLineStations.push(s);
                    drawRealRoute(lls, lle);
                }
            }
        }

        //绘制班车路线(沿实际路线)
        function drawRealRoute(s, e) {
            var start = s;
            var end = e;
            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            var lineStrokeOpacity = 0.4;
            var lineStrokeWeight = 5;

            var drPolylineOptions = {
                strokeColor: lineStrokeColor,
                strokeOpacity: lineStrokeOpacity,
                strokeWeight: lineStrokeWeight
            };
            directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true, preserveViewport: false, polylineOptions: drPolylineOptions });
            directionsDisplay.setMap(map);
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
                else {
                    directionsDisplay.setMap(null);
                    directionsDisplay = null;
                    var pts = [];
                    pts.push(s);
                    var i = 0;
                    for (i = 0; i < waypts.length; i++) {
                        pts.push(waypts[i].location);
                    }
                    pts.push(e);
                    var routeLine = new google.maps.Polyline({
                        path: pts,
                        strokeColor: lineStrokeColor,
                        strokeOpacity: lineStrokeOpacity,
                        strokeWeight: lineStrokeWeight
                    });
                    routeLine.setMap(map);
                }
            });
        }
        //取消地图标注点的选中
        function unselectAllMarkers() {
            for (var i = 0; routeLineStations != null && i < routeLineStations.length; i++) {
                routeLineStations[i].unselect();
            }
        }

        //提出站点附近的其他路线
        function loadStationNearRoutes(rid, sid) {
            if (all_rs && all_rs.length > 0) {
                for (var i = 0; i < all_rs.length; i++) {
                    var it = all_rs[i];
                    var routeContainer = $("#rt_route_container");
                    if (it.rid == curRid || Math.sqrt(Math.pow(it.lon - lon, 2) + Math.pow(it.lat - lat, 2)) < wucha) {
                        if (!nearRouteIsExist(nearStation, it.rid)) {
                            nearStation.push(it.rid);
                            var html = '<li><a href="javascript:;" onclick=gotoRoute("' + it.rid + '");><span id="rt_' + it.rid + '">'
                                    + '[' + it.bt + ']' + it.rname
                                    + '</span></a></li>';
                            routeContainer.append(html);
                        }
                    }
                }
            }
        }

        function gotoRoute(rid) {
            window.location = pageUrl + "?rid=" + rid;
        }
        //路线是否重复
        function nearRouteIsExist(arr, rid) {
            var ifExist = false;
            $.each(arr, function(n, o) {
                if (o == rid) {
                    ifExist = true;
                }
            });
            return ifExist;
        }
        //提出路线及站点的详细信息
        function loadRouteStationDetailInfos(rid, sid) {
            if (routeInfo != null) {
                //$("#routeInfoTypeCity").html(routeInfo.cname + '--' + routeInfo.rt);
                //$("#routeInfoSS").html(routeInfo.rt);
                // 可容纳 50 人，每周一、周二、周三、周四、周五 运行
                $("#routeInfoRunMaxMan").html(
                '可容纳 ' + routeInfo.ps + ' 人，每' + routeInfo.ww + ' 运行'
                );
            }
            var sinums = $.ajax({
                url: dircache + 'gps_nums/' + rid + '.js?rnd=' + Math.random(),
                async: false,
                dataType: "json"
            }).responseText;
            try {
                sinums = eval("(" + sinums + ")");
                var sinum = 0;
                if (sinums != null) {
                    sinum = sinums.rcnt;
                }
                $("#routeInfoPS").html("近几天本路线平均刷卡人数：" + (sinum == null ? "0 人" : ((sinum / 2).toFixed(0) + " 人")));
            } catch (ex) { sinums = null; }
        }
        //设置当前为选中的状态
        function setSelectLi(rid, sid) {
            var hasSelected = false;
            for (var i = 0; routeLineStations != null && i < routeLineStations.length; i++) {
                if (routeLineStations[i].result_.sid == sid) {
                    routeLineStations[i].select();
                    map.setCenter(routeLineStations[i].marker_.position);
                    hasSelected = true;
                    break;
                }
            }
            if (!hasSelected && routeLineStations.length > 0) {
                routeLineStations[0].select();
                map.setCenter(routeLineStations[0].marker_.position);
            }
        }
        //查看站点员工列表
        function ShowEmpList(rid, sid, sname) {
            var reqUrl = '<%=this.Url.Content("~/Home/ViewEmpList?rid=' + rid + '&sid=' + sid + '")%>';
            showModel(reqUrl, sname + '    站点人员列表', 500, 400);
        }
        //查看照片
        function ShowPhoto(stationId, sname) {
            var reqUrl = '<%=this.Url.Content("~/Home/ViewPhoto?StationID=' + stationId + '")%>';
            showModel(reqUrl, sname + '    站点照片', 650, 400);
        }
    </script>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="mainFrameTop" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContainerPlaceHolder" runat="server">
    <div style="width: 200px; float: left;">
        <div class="text_body" style="margin-bottom: 10px; width: 100%;">
            <div class="text_title">
                <span></span>
                <p id="stationListTitle" style="display: inline;">
                </p>
                站点列表</div>
            <div class="text_cont" style="text-align: left; padding-top: 10px; padding-left: 10px;">
                <div style="padding-top: 5px; line-height: 20px; vertical-align: top;">
                    <ul class="text" id="ulStationList">
                    </ul>
                </div>
            </div>
            <div class="text_bot">
                <span></span>
            </div>
        </div>
        <div class="text_body" style="margin-bottom: 10px; width: 100%;">
            <div class="text_title">
                <span></span>相关路线列表</div>
            <div class="text_cont" style="text-align: left; padding-top: 10px; padding-left: 10px;">
                <div id="Div1" style="text-align: left;">
                </div>
                <div style="padding-top: 5px; line-height: 20px; vertical-align: top;">
                    <ul class="text" id="rt_route_container">
                    </ul>
                </div>
            </div>
            <div class="text_bot">
                <span></span>
            </div>
        </div>
    </div>
    <%-- lef list end--%>
    <%-- map div begin--%>
    <div style="width: 700px; float: left; margin-left: 10px;">
        <div class="text_body" style="margin-bottom: 10px;">
            <div class="text_top">
                <span></span>
            </div>
            <div class="text_cont" style="text-align: center; padding-top: 5px;">
                <div id="map_canvas" style="width: 680px; height: 400px; text-align: left;">
                   <div style="width:100%; text-align:center; padding-top:100px; ">
                        <img src="<%=this.Url.Content("~/Content/gimgs/loading.gif")%>" /><br />
                        <p>GoogleMap Loading......</p>
                    </div>
                 </div>
                <div style="position: relative; top: 0px; margin-left: 0px; text-align: left;">
                    提示： 绿色路线/图标（如：<img alt="" src='<%=this.Url.Content("~/Content/gimgs/marker_greenA.png")%>' />）表示<b>上班方向</b>的路线/站点 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    红色路线/图标（如：<img alt="" src='<%=this.Url.Content("~/Content/gimgs/marker_redA.png")%>' />）表示<b>下班方向</b>的路线/站点
                </div>
            </div>
            <div class="text_bot">
                <span></span>
            </div>
        </div>
        <div class="text_body" style="margin-bottom: 10px; width: 100%;">
            <div class="text_title">
                <span></span>
                <p id="routeInfoTitle" style="display: inline;">
                </p>
            </div>
            <div class="text_cont" style="text-align: left; padding-top: 5px; padding-left: 6px;">
                <div id="Div2" style="text-align: left;">
                </div>
                <div class="td_routedtl">
                    <div id="routeInfoTypeCity" class="routetype">
                    </div>
                    <div id="routeInfoSS" class="routetdtl">
                    </div>
                    <div id="routeInfoRunMaxMan" class="routeattachinfo">
                    </div>
                    <div class="routeattachinfo">
                        <span id="routeInfoPS"></span>
                    </div>
                </div>
            </div>
            <div class="text_bot">
                <span></span>
            </div>
        </div>
    </div>
    <%-- map div end--%>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="mainFrameBottom" runat="server">
</asp:Content>
